<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useWindowResize, useDragScroll } from '@/hooks'
import { isTouchDevice } from '@/tools'
import Item1 from './item1/index.vue'
import Item2 from './item2/index.vue'
import Item3 from './item3/index.vue'
import Item4 from './item4/index.vue'
import Item5 from './item5/index.vue'

const scrollContainerRef = useTemplateRef<HTMLDivElement | null>('scrollContainerRef')
const { enable, disable } = useDragScroll(scrollContainerRef)
useWindowResize((viewPortWidth) => {
  if (isTouchDevice()) {
    disable()
    return
  }

  if (viewPortWidth >= 640 && viewPortWidth < 1024) {
    enable()
  } else {
    disable()
  }
})
</script>

<template>
  <div class="block6_container pc-container-content-1312-grid">
    <div class="middle-content sm:grid sm:grid-cols-subgrid sm:col-span-full">
      <div
        class="py-[21.8vw] grid justify-items-center sm:[grid-column:2] sm:py-[4.875rem] lg:py-[clamp(4.875rem,-0.625rem+8.5938vw,7.625rem)]"
      >
        <img
          class="w-[66%] aspect-[262/43] sm:w-[30%]"
          src="@/views/product/reno14-pro/image/6/images-coloros-coloros-1.png.webp"
          alt=""
        />
        <p
          class="mt-[4.18vw] text-2xl sm:mt-[0.875rem] lg:text-[clamp(1.5rem,-1.5rem+4.6875vw,3rem)]"
        >
          超流畅，更 AI
        </p>
        <button
          class="mt-[6.51vw] px-[5.58vw] py-[2.23vw] text-sm text-white bg-black rounded-full hover:bg-[#3d3d3d] cursor-pointer sm:mt-[1.25rem] sm:px-[1.25rem] sm:py-[0.5rem]"
        >
          进一步了解 ColorOS 15
        </button>
      </div>

      <div
        class="sm:grid sm:grid-cols-2 sm:grid-rows-1 sm:[grid-column:2] sm:gap-x-[0.25rem] lg:gap-x-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)]"
      >
        <item1 class="" />
        <item2 class="max-sm:mt-[0.25rem]" />
      </div>

      <div
        class="sm:col-span-full sm:max-lg:overflow-x-auto sm:px-[1.5rem] sm:[scrollbar-width:none] sm:mt-[0.25rem] sm:@container lg:px-0 lg:mt-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)] lg:[grid-column:2]"
        ref="scrollContainerRef"
      >
        <div
          class="sm:flex sm:w-max sm:gap-[0.25rem] sm:h-[55.1vw] sm:overflow-y-hidden lg:w-full lg:gap-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)] lg:h-[clamp(30.25rem,23.25rem+10.9375vw,33.75rem)]"
        >
          <item3
            class="max-sm:mt-[0.25rem] sm:w-[calc((100cqw-0.25rem)/2)] sm:h-full lg:w-[clamp(13.5rem,0.25rem+20.7031vw,20.125rem)]"
          />
          <item4 class="max-sm:mt-[0.25rem] sm:w-[71.7vw] sm:h-full lg:flex-1 lg:w-auto" />
          <item5 class="max-sm:mt-[0.25rem] sm:w-[71.7vw] lg:flex-1 lg:w-auto" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.block6_container {
  @apply relative z-50 rounded-t-4xl bg-white;
}
</style>
